<template>
	<view v-if="goods_info.goods_name">
		<!-- 商品详情页轮播图页面 -->
		<swiper class="goodsdetail-swiper" indicator-dots="true" autoplay circular interval="2500">
			<swiper-item v-for="(item,index) in goods_info.pics">
				<image :src="item.pics_big_url" mode="" @click="preview(index)"></image>
			</swiper-item>
		</swiper>

		<!-- 商品描述区域 -->
		<view class="info-box">
			<view class="info-price">
				￥{{goods_info.goods_price}}
			</view>
			<view class="info-content">
				<view class="info-describe">
					<text>{{goods_info.goods_name}}</text>
				</view>
				<view class="info-icon">
					<uni-icons type="star" size="20"></uni-icons>
					<text>收藏</text>
				</view>
			</view>
			<view class="info-yf">
				<text>运费：包邮</text>
			</view>
		</view>
		<!-- 商品信息图文介绍 -->
		<view class="rich-box">
			<rich-text :nodes="goods_info.goods_introduce"></rich-text>
		</view>
		<!-- 商品导航栏区域 -->
		<view class="good_nav">	
		<uni-goods-nav :fill=" true" 
		:options="options" 
		:buttonGroup="buttonGroup" 
		@click="onClick"
		@buttonClick="buttonClick" />

	</view>
	</view>
</template>

<script>
	// https://api-hmugo-web.itheima.net/api/public/v1/goods/detail 请求路径
	// import {mapState} from "vuex"
	import {mapGetters} from "vuex"
	export default {
		
		data() {
			return {
				// 用于存储商品信息
				goods_info: {},
				//用于存储大图预览
				big_arr: [],
				// 商品导航栏数据
				options: [ {
					icon: 'shop',
					text: '店铺',
					infoBackgroundColor: '#007aff',
					infoColor: "red"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 0
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			}

		},
		computed:{
			// ...mapGetters('total',['shopcartotal'])
			total(){
				 return this.$store.getters.shopcartotal
			}
			// shopcartotal(){
			// 	return  this.$store.state.cart.shoptotal
			// }
		},
		watch:{
			total(newvalue){
				this.options[1].info=newvalue;
			}
		},
		onLoad(options) {
			// console.log(options);
			const goods_id = options.good_id
			this.getgooddetail(goods_id)
			console.log(this.$store.state.cart.cart[0]);
			// console.log(this.my-cart);
			  this.options[1].info=this.total 
		},
		methods: {
			// 获取商品详情数据
			async getgooddetail(goods_id) {
				const [nu, res] = await uni.request({
					url: "https://api-hmugo-web.itheima.net/api/public/v1/goods/detail",
					data: {
						goods_id: goods_id
					}
				})
				this.goods_info = res.data.message
				console.log(this.goods_info);
			},
			// 大图浏览事件处理函数
			preview(i) {
				if (this.big_arr = []) {
					this.goods_info.pics.forEach((e) => {
						this.big_arr.push(e.pics_big_url)
					});
				} else {
					this.big_arr = [...this.big_arr]
				}
				console.log(this.big_arr);
				uni.previewImage({
					current: i,
					// urls:this.goods_info.pics.map((x)=>{return x.pics_big_url})
					urls: this.big_arr
				})
			},
			//跳转购物车事件回调函数
			onClick(e){
				// console.log(e);
				if(e.content.text=='购物车'){
					uni.switchTab({
						url:"/pages/cart/cart"
					})
				}
			},
			//将商品信息加入购物车
			buttonClick(e){
				if(e.index==0){
					// console.log("加入购物车事件触发");
					// 定义一个商品信息对象数据
					const goods={
						goods_id:this.goods_info.goods_id,
						goods_name:this.goods_info.goods_name,
						goods_price:this.goods_info.goods_price,
						goods_small_logo:this.goods_info.goods_small_logo,
						goods_state:true,
						goods_count:1
					}
					this.$store.commit('addgooddetail',goods);
				}
			}
		}
	}
</script>

<style lang="scss">
	// 轮播图样式
	.goodsdetail-swiper {
		height: 750rpx;

		swiper-item {
			width: 100%;

			// border: 1px solid red;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	//商品信息描述模块样式
	.info-box {
		padding: 10px;
		padding-right: 0px;

		.info-price {
			color: red;
			margin: 10px 0px;
		}

		.info-content {
			display: flex;

			.info-describe {
				font-size: 13px;
			}

			.info-icon {
				width: 120px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-left: 1px solid #efefef;
				font-size: 12px;
				color: gray;
			}
		}

		.info-yf {
			margin: 10px 0px;
			font-size: 12px;
			color: gray;
		}
	}
	.rich-box{
		// margin-bottom: 50px;
		padding-bottom: 50px;
	}
	.good_nav{
	position: fixed;
	bottom: 0px;
	width: 100%;
	}
</style>